{extend name="layout"}
{block name="detail"}

    <!-- Page Header-->
    <header class="page-header">
        <div class="container-fluid">
            <h2 class="no-margin-bottom">数据统计</h2>
        </div>
    </header>
    <!-- Dashboard Counts Section-->
    <section class="dashboard-counts no-padding-bottom">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>会员</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$userTotalCount}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$userTotalCount}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-bill"></i></div>
                        <div class="title"><span>本周新增<br>会员</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$userWeekCount}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$userWeekCount}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>一星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V1Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V1Count']}</strong></div>
                    </div>
                </div>
            </div>
            <div class="row">

                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>二星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V2Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V2Count']}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>三星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V3Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V3Count']}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>四星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V4Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V4Count']}</strong></div>
                    </div>
                </div>

            </div>

            <div class="row">
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>五星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V5Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V5Count']}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>六星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V6Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V6Count']}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>七星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V7Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V7Count']}</strong></div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>八星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V8Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V8Count']}</strong></div>
                    </div>
                </div>
                <div class="col-xl-1 col-sm-1"></div>
                <div class="col-xl-3 col-sm-3 bg-white has-shadow">
                    <div class="p-2 d-flex align-items-center">
                        <div class="icon bg-violet"><i class="icon-user"></i></div>
                        <div class="title"><span>总计<br>九星</span>
                            <div class="progress">
                                <div role="progressbar" style="width: 25%; height: 4px;" aria-valuenow="{$grade['V9Count']}" aria-valuemin="0" aria-valuemax="1000" class="progress-bar bg-violet"></div>
                            </div>
                        </div>
                        <div class="number"><strong>{$grade['V9Count']}</strong></div>
                    </div>
                </div>
            </div>

        </div>
    </section>


{/block}